<template>
	<view class="wrap">
		<u-image class="image" width="40rpx" height="40rpx" src="/static/icons/search_icon.png"></u-image>
		<view class="text" v-if="!isSearch">达人昵称、ID</view>
		<u-input 
			v-else 
			v-model="searchVal" 
			type="text"
			:height="height"
			:placeholder="placeholder" 
			:placeholder-style="placeholderStyle"
			:confirm-type="confirmType" />
	</view>
</template>

<script>
export default {
	props: {
		isSearch: {
			type: Boolean,
			default: false
		},
		placeholderStyle: {
			type: String,
			default: 'color: #999999'
		},
		confirmType: {
			type: String,
			default: 'search'
		},
		height: [String, Number],
		current: [String, Number]
	},
	data() {
		return {
			searchVal: ''
		}
	},
	computed: {
		placeholder() {
			let str = ''
			switch(this.current) {
				case 0:
					str = '任务标题，商品品牌'
					break
				case 1:
					str = '达人昵称、ID'
					break
			}
			return str
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	align-items: center;
	margin: 0 28rpx;
	padding: 0 20rpx;
	height: 68rpx;
	background-color: $u-input-bg-color;
	border-radius: 68rpx;
	.image {
		margin-right: 12rpx;
	}
	.text {
		flex: 1;
		color: $u-text-light-color;
	}
}
</style>
